<template>
  <p style="text-align:center">南宁软件园中心 - 梁世燊 - JSDTN240308 - 何贻连</p>
  <div style="width: 1024px;margin: 24px auto;">
    <el-row>
      <el-col :span="6" v-for="card in arr">
        <div class="hyl_card">
          <a href="/long_rent/detail">
            <img :src="card.imgs" alt="" width="244px" height="172px" class="hyl_mainPic">
            <div class="hyl_cardMeg">
              <div style="margin: 0 0 5px;font-weight: bold;color: #333333;font-size: 15px;">
                {{ card.brandInfo }} <span :formatter="transmissionTypeFormatter">{{ card.transmissionType }}</span>
              </div>
              <div style="color: #666666;margin: 0 0 13px;font-family: 'PingFang SC';font-size: 12px;">{{ card.plateNumber }}
                <span style="color: #FF6633;">{{ card.score }}</span>
              </div>
              <div style="color: #FF4D3B;font-size: 12px;line-height: 27px">
                <span style="font-size: 18px;font-weight: bold;">{{ card.monthRentPrice }}</span>
                元/月均
              </div>
            </div>
          </a>
        </div>
      </el-col>
    </el-row>

    <div class="app-pagination">
      <el-pagination background layout="prev, pager, next" :total="1000"/>
    </div>
  </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";

const arr = ref([
]);

const arr1 = ref(['关于凹凸','发展历程','媒体报道','品牌库','租车价格表','全国租车'])
const arr2 = ref(['平台规则','租车流程','服务条款','车主责任','隐私协议'])

const transmissionTypeFormatter = (row,column,cellValue,index)=>{
  if (cellValue==1){
    cellValue = '自动挡';
  }else if (cellValue==2){
    cellValue = '手动挡';
  }
  return cellValue;
}

onMounted(()=>{
  axios.get('http://localhost:10300/v1/select')
      .then((response)=>{
        if (response.data.code==200){
          console.log(response.data.data);
          arr.value = response.data.data;
        }
      })
})
</script>

<style scoped>
/*Head*/
.hyl_menu1 {
  width: 88px;
  height: 40px;
  padding: 0;
  position: absolute;
}

.hyl_menu2 {
  width: 96px;
  height: 40px;
  position: absolute;
  padding: 0;
}

.hyl_nav1:hover {
  display: block;
  width: 88px;
  height: 40px;
  background-color: #00CF97;
  font-weight: bold;
  line-height: 40px;
  color: #FFF;
  border-radius: 20px;
}

.hyl_nav2:hover {
  display: block;
  width: 96px;
  height: 40px;
  background-color: #00CF97;
  font-weight: bold;
  line-height: 40px;
  color: #FFF;
  border-radius: 20px;
}

/*Main*/
.hyl_card {
  height: 300px;
  width: 244px;
  margin: 0 15px 0 0;
  text-align: left;
}

.hyl_mainPic {
  transition: 0.5s;
  border-radius: 5px;
  cursor: pointer;
}

.hyl_mainPic:hover {
  transform: scale(1.05);
  border-radius: 5px;
}

.hyl_cardMeg {
  height: 110px;
  padding: 0 6px;
  margin-top: 6px;
}

/*Footer*/
.hyl_footerLink:hover {
  color: #FFFFFF77
}

.app-pagination {
  display: flex;
  justify-content: center;
}
</style>

<style>
.app-pagination .el-pagination.is-background .btn-next.is-active,
.app-pagination .el-pagination.is-background .btn-prev.is-active,
.app-pagination .el-pagination.is-background .el-pager li.is-active {
  background-color: #00bc93;
}
</style>
